<template>
  <div class="tabbar_bar">
     <div class="tab-bar-item">
       <img src="../../../assets/img/detail/phonenum.png">
       <div>客服</div>
     </div>
     <div class="tab-bar-item">
       <img src="../../../assets/img/detail/service.png">
       <div>店铺</div>
     </div>
     <div class="tab-bar-item">
       <img src="../../../assets/img/detail/recommend_on.png">
       <div>收藏</div>
     </div>
     <div class="cart" @click="addcart">
       加入购物车
     </div>
     <div class="buy">
       购买
     </div>
  </div>
</template>

<script>
  export default {
    name: "detail-btbar",
    methods:{
      addcart(){
        this.$emit('addcart')
      }
    }
  }
</script>

<style scoped>
  .tabbar_bar{
    display: flex;
    background-color: #f6f6f6;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 -1px 1px rgba(100,100,100,.2);
  }
  .tab-bar-item{
    flex: 1;
    text-align: center;
    height: 49px;
    font-size: 14px;
  }

  .tab-bar-item img{
    margin-top: 3px;
    width: 24px;
    height: 24px;
  }
  .cart{
    width: 100px;
    text-align: center;
    line-height: 49px;
    background: #ff5777;
    color: #ffffff;
  }
  .buy{
    width:75px;
    text-align: center;
    line-height: 49px;
    background: yellow;
    color: #ffffff;
  }
</style>
